<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/styles.css}"/>
</head>

<body>

<form method="POST" th:action="@{/orders}" th:object="${tacoOrder}">
    <h1>Order your taco creations!</h1>

    <img th:src="@{/images/TacoCloud.png}"/>

    <h3>Your tacos in this order:</h3>
    <a th:href="@{/design}" id="another">Design another taco</a><br/>
    <ul>
        <li th:each="taco : ${tacoOrder.tacos}">
            <span th:text="${taco.name}">taco name</span></li>
    </ul>

    <h3>Deliver my taco masterpieces to...</h3>
    <label for="deliveryName">Name: </label>
    <input type="text" th:field="*{deliveryName}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('deliveryName')}"
          th:errors = "*{deliveryName}">deliveryName Error
    </span>
    <br/>

    <label for="deliveryStreet">Street address: </label>
    <input type="text" th:field="*{deliveryStreet}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('deliveryStreet')}"
          th:errors = "*{deliveryStreet}">deliveryStreet Error
    </span>
    <br/>

    <label for="deliveryCity">City: </label>
    <input type="text" th:field="*{deliveryCity}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('deliveryCity')}"
          th:errors = "*{deliveryCity}">deliveryCity Error
    </span>
    <br/>

    <label for="deliveryState">State: </label>
    <input type="text" th:field="*{deliveryState}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('deliveryState')}"
          th:errors = "*{deliveryState}">deliveryState Error
    </span>
    <br/>

    <label for="deliveryZip">Zip code: </label>
    <input type="text" th:field="*{deliveryZip}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('deliveryZip')}"
          th:errors = "*{deliveryZip}">deliveryZip Error
    </span>
    <br/>

    <h3>Here's how I'll pay...</h3>
    <label for="ccNumber">Credit Card #: </label>
    <input type="text" th:field="*{ccNumber}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('ccNumber')}"
          th:errors = "*{ccNumber}">CC Num Error</span>
    <br/>

    <label for="ccExpiration">Expiration: </label>
    <input type="text" th:field="*{ccExpiration}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('ccExpiration')}"
          th:errors = "*{ccExpiration}">ccExpiration Error
    </span>
    <br/>

    <label for="ccCVV">CVV: </label>
    <input type="text" th:field="*{ccCVV}"/>
    <span class = "validationError"
          th:if = "${#fields.hasErrors('ccCVV')}"
          th:errors = "*{ccCVV}">ccCVV Error
    </span>
    <br/>

    <input type="submit" value="Submit Order"/>
</form>
</body>
</html>